<!--
 * @Description:
 * @Author: yunChuangShiTai
 * @Date: 2024-02-26 16:44:30
 * @LastEditTime: 2024-07-19 11:45:07
 * @LastEditors: CAI 2246513771@qq.com
-->
<template>
  <div class="dashboard-container">
    <el-dialog :title="type == 'create' ? '添加路线管理' : '修改路线管理'" v-model="visible" width="800px">
      <el-form :model="form" label-width="130px" size="large">
        <el-form-item label="线管名称">
          <el-input placeholder="请输入线管名称" style="width: 500px" v-model="form.name"></el-input>
        </el-form-item>

        <el-form-item label="路线编号">
          <el-input placeholder="请输入路线编号" style="width: 500px" v-model="form.number"></el-input>
        </el-form-item>

        <el-form-item label="管径">
          <el-input placeholder="请输入管径" style="width: 500px" v-model="form.pipeDiameter"></el-input>
        </el-form-item>

        <el-form-item label="管理单位">
          <el-input placeholder="请输入管理单位" style="width: 500px" v-model="form.unit"></el-input>
        </el-form-item>

        <el-form-item label="负责人">
          <el-input placeholder="请输入负责人" style="width: 500px" v-model="form.head"></el-input>
        </el-form-item>

        <el-form-item label="设备名称">
          <el-input placeholder="请输入设备名称" style="width: 500px" v-model="form.equipmentName"></el-input>
        </el-form-item>

        <el-form-item label="设备类型">
          <el-input placeholder="请输入设备类型" style="width: 500px" v-model="form.equipmentType"></el-input>
        </el-form-item>

        <el-form-item label="当前数据">
          <el-input placeholder="请输入当前数据" style="width: 500px" v-model="form.nowData"></el-input>
        </el-form-item>

        <el-form-item label="安装位置">
          <el-input placeholder="请输入安装位置" style="width: 500px" v-model="form.position"></el-input>
        </el-form-item>

        <el-form-item label="经纬度">
          <el-input placeholder="请输入经纬度" style="width: 500px" v-model="form.latitude"></el-input>
        </el-form-item>

        <el-form-item label="维护单位">
          <el-input placeholder="请输入维护单位" style="width: 500px" v-model="form.maintenance"></el-input>
        </el-form-item>

        <el-form-item label="安装时间">
          <el-date-picker
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
            v-model="form.time"
            type="date"
            placeholder="安装时间"
          />
        </el-form-item>

        <el-form-item label="巡检周期">
          <el-input placeholder="请输入巡检周期" style="width: 500px" v-model="form.cycle"></el-input>
        </el-form-item>
      </el-form>
      <div class="flexSB">
        <div></div>
        <div class="dialog-footer" style="width:200px">
          <el-button @click="closeBox" style="margin-right:0">取 消</el-button>
          <el-button @click="submit" type="primary" :loading="submitComplete">确 定</el-button>
        </div>
      </div>
    </el-dialog>
    <div>
      <el-input
        v-model="query.name"
        class="w-50 m-2"
        placeholder="请输入内容"
        :prefix-icon="Search"
        style="width:200px"
      />

      <el-button class="marginLeft" type="primary" :icon="Search" style="margin:0 10px">搜索</el-button>
      <el-button class="marginLeft" type :icon="Refresh" @click="resetting" style="margin:0">重置</el-button>
      <el-button
        type="primary"
        :icon="Plus"
        plain
        style="margin:0 10px"
        @click="visible = true;type = 'create'"
      >新增</el-button>
      <el-button type="warning" :icon="Download" plain style="margin:0">导出</el-button>
    </div>

    <div>
      <el-card body-style="padding:10px" class="marginTop">
        <el-table :data="tableData" max-height="550px" size="small" style="width: 100%">
          <el-table-column label="序号" prop="id" />
          <el-table-column label="线管名称" prop="name" />
          <el-table-column label="路线编号" prop="number" />
          <el-table-column label="管径" prop="pipeDiameter" />
          <el-table-column label="管理单位" prop="unit" />
          <el-table-column label="负责人" prop="head" />

          <el-table-column label="设备名称" prop="equipmentName" />
          <el-table-column label="设备类型" prop="equipmentType" />
          <el-table-column label="当前数据" prop="nowData" />
          <el-table-column label="安装位置" prop="position" />
          <el-table-column label="经纬度" prop="latitude" />

          <el-table-column label="安装时间" prop="time" />
          <el-table-column label="维护单位" prop="maintenance" />
          <el-table-column label="巡检周期" prop="cycle" />
          <el-table-column label="操作" width="150" prop>
            <template #default="scope">
              <el-dropdown>
                <el-button type="primary">
                  更多操作
                  <el-icon class="el-icon--right">
                    <arrow-down />
                  </el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>
                      <el-button
                        type="primary"
                        @click="visible = true;type = 'update';form = scope.row"
                      >修改</el-button>
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <el-button type="danger" @click="open(scope.row.id)">删除</el-button>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Refresh, Plus, Download } from '@element-plus/icons-vue'

let query = ref({
  name: '',
})
let form = ref({
  name: '',
  number: '',
  pipeDiameter: '',
  unit: '',
  head: '',
  time: '',
  maintenance: '',
  cycle: '',
  equipmentName: '',
  equipmentType: '',
  nowData: '',
  position: '',
  latitude: '',
})
let type = ref('create')
let visible = ref(false)

let submitComplete = ref(false)
let typeList = ref([
  {
    label: 0,
    name: '投诉',
  },
  {
    label: 1,
    name: '帮助',
  },
])
let tableData = ref([
  {
    id: 1,
    name: '水厂-白石崖',
    number: 'XY12153',
    pipeDiameter: 'DN400',
    unit: '鑫源公司',
    head: '张珊',
    time: '2023-12-15 12:23:11',
    maintenance: '心愿公司',
    cycle: '4次/周',
    equipmentName: '名称',
    equipmentType: '类型',
    nowData: '数据',
    position: '紫云',
    latitude: '105.123654，106.236548',
  },
  {
    id: 2,
    name: '青山村',
    number: 'SX4545',
    pipeDiameter: 'DN400',
    unit: '鑫源公司',
    head: '张珊',
    time: '2023-12-15 12:23:11',
    maintenance: '心愿公司',
    cycle: '4次/周',
    equipmentName: '名称',
    equipmentType: '类型',
    nowData: '数据',
    position: '紫云',
    latitude: '105.123654，106.236548',
  },
  {
    id: 3,
    name: '板当镇',
    number: 'XY12153',
    pipeDiameter: 'DN400',
    unit: '鑫源公司',
    head: '张珊',
    time: '2023-12-15 12:23:11',
    maintenance: '心愿公司',
    cycle: '4次/周',
    equipmentName: '名称',
    equipmentType: '类型',
    nowData: '数据',
    position: '紫云',
    latitude: '105.123654，106.236548',
  },
  {
    id: 4,
    name: '云岭街道',
    number: 'XY12153',
    pipeDiameter: 'DN400',
    unit: '鑫源公司',
    head: '张珊',
    time: '2023-12-15 12:23:11',
    maintenance: '心愿公司',
    cycle: '4次/周',
    equipmentName: '名称',
    equipmentType: '类型',
    nowData: '数据',
    position: '紫云',
    latitude: '105.123654，106.236548',
  },
])

// 在组件的 mounted 钩子函数中初始化 ECharts 实例并绘制图表

function resetting() {
  query.value = {
    name: '',
  }
}
function initForm() {
  form.value = {
    name: '',
    number: '',
    pipeDiameter: '',
    unit: '',
    head: '',
    time: '',
    maintenance: '',
    cycle: '',
    equipmentName: '',
    equipmentType: '',
    nowData: '',
    position: '',
    latitude: '',
  }
}
function closeBox() {
  visible.value = false
  initForm()
}

function deleteFun(id) {
  const indexToRemove = tableData.value.findIndex((item) => item.id === id)
  if (indexToRemove !== -1) {
    tableData.value.splice(indexToRemove, 1)
  }
}

const open = (id) => {
  ElMessageBox.confirm('确定要删除这条数据吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      console.log('id', id)
      deleteFun(id)
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
    })
    .catch(() => {})
}

function submit() {
  if (submitComplete.value) return
  submitComplete.value = true
  if (!(form.value.name && form.value.number)) {
    ElMessage({
      message: '请将信息填写完整！',
      type: 'warning',
    })

    submitComplete.value = false
    return
  }
  if (type.value == 'create') {
    //delete this.form.clientsNo

    submitComplete.value = false
    ElMessage({
      message: '添加成功',
      type: 'success',
    })
    visible.value = false
    if (tableData.value.length) {
      form.value.id = tableData.value[tableData.value.length - 1].id + 1
    } else {
      form.value.id = 1
    }
    tableData.value.push(form.value)
    initForm()
  } else {
    submitComplete.value = false
    ElMessage({
      message: '修改成功',
      type: 'success',
    })
    visible.value = false
    initForm()
  }
}
</script>

<style lang="scss" scoped>
.marginTop {
  margin-top: 20px;
}
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
